<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../008定时器的使用/2-move.css">
    <script src="../js/startMove.js"></script>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('move_box');
            var oPrev=getByClass(oDiv,'prev')[0];
            var oNext=getByClass(oDiv,'next')[0];
            var oBigImg=getByClass(oDiv,'big_img')[0];
            var aBigLi=oBigImg.getElementsByTagName('li');
            var nowZIndex=2;
            var now=0;

           // alert(getByClass(oDiv,'small_img')); 测试代码
           // alert(oPrev);
            for(var i=0;i<aBigLi.length;i++){
               // aBigLi[i].index=i;//给大图的index赋值0-2
//                now表示大图当前的index值
               //now=this.index;
               // alert(this.index);

                oPrev.onclick=function(){//一点击向前按钮，物体向左运动，index值逐渐减少
                   i--;
                   if(i==-1){//需要给一行判断语句，才能让代码循环下去
                       i=aBigLi.length-1;
                   }
                    aBigLi[i].style.zIndex=nowZIndex++;
                };

                oNext.onclick=function(){
                    i++;
                    if(i==aBigLi.length){
                        i=0;
                    }
                    aBigLi[i].style.zIndex=nowZIndex++;
                };
            }

        };

  function getByClass(oParent,sclass){//通过class样式获取元素值
      var aResult=[];
      var aEle=oParent.getElementsByTagName('*');
      for(var i=0;i<aEle.length;i++){
          if(aEle[i].className==sclass){//这里是重点，要注意每个标签的className==sclass中的className一定不能忘记
              aResult.push(aEle[i]);
          }
      }
      return aResult;
  }
    </script>
</head>
<body>
<div id="move_box">
    <div class="big_img">
        <ul>
            <div class="prev"></div>  /*前一页按钮*/
            <div class="next"></div>  //下一页按钮
            <li style="z-index:1"><img src="../img/move1.jpg" ></li>
            <li><img src="../img/move2.jpg" ></li>
            <li> <img src="../img/move3.jpg" ></li>
        </ul>
    </div>
    <div class="small_img">
        <ul>
            <li><img src="../img/move1.jpg" ></li>
            <li><img src="../img/move2.jpg" ></li>
            <li><img src="../img/move3.jpg" ></li>
        </ul>
    </div>

</div>
</body>
</html>